*{
    margin:0;
    padding:0;
}
.main{
    width:600px;
    height:600px;
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    display:flex;
    justify-content: center;
    align-items: center;
    background:gray;
}

.white{
    color:white;
    text-shadow: 2px 2px 4px black;
}
/* 
    关于变型中心点的计算，X轴位移的数值减去宽的一半就是反方向确定变型参考点的值 
    角度的计算可以直接用calc()除以元素数量，即可自动等角度排列，关于css变量的使用可以参考以前的视频。
*/
.main div.month{
    position: absolute;
    transform-origin:-60px ;
    transform:translateX(85px) rotateZ(calc(30deg * var(--m)));
    width:50px;
}
.main div.days{
    position:absolute;
    transform-origin: -110px;
    transform:translateX(130px) rotateZ(calc(360deg / 31 * var(--d)));
    width:40px;
}
.main div.hours{
    position:absolute;
    transform-origin: -150px;
    transform:translateX(165px) rotateZ(calc(360deg / 24 * (var(--h))));
    width:30px;
}
.main div.min{
    position:absolute;
    transform-origin: -180px;
    transform:translateX(200px) rotateZ(calc(360deg / 60 * (var(--min))));
    width:40px;
}
.main div.sec{
    position:absolute;
    transform-origin: -210px;
    transform:translateX(230px) rotateZ(calc(360deg / 60 * (var(--s))));
    width:40px;
}